<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="div1">我是一个div</div>

    <script>
      //   1. 普通函数调用
        window.name = "globalName";

        var getName = function () {
          return this.name;
        };

        console.log(getName()); // 输出：globalName

        window.name = "globalName";

      //   2. 对象赋值调用
        var myObject = {
          name: "sven",
          getName: function () {
            return this.name;
          },
        };

        var getName = myObject.getName;
        console.log(getName()); // globalName

      // 3. 在div节点的事件函数内部，有一个局部的callback方法，
      //    callback被作为普通函数调用时，callback内部的this指向了window，
      //    但我们往往是想让它指向该div节点，
      window.id = "window";

      document.getElementById("div1").onclick = function () {
        alert(this.id); // 输出：'div1'
        var callback = function () {
          alert(this.id); // 输出：'window'
        };
        callback();
      };

      // 3.1 解决方法
      document.getElementById( 'div1' ).onclick = function(){
            var that = this;    // 保存div的引用
            var callback = function(){
              alert ( that.id );    // 输出：'div1'
            }
            callback();
        };
        // 在ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined
        function func(){
            "use strict"
            alert ( this );    // 输出：undefined
        }

        func();
    </script>
  </body>
</html>
